<template>
  <div class="page-miH page-bgBack">
    <PageHeader :backLock="false"> 成员管理 </PageHeader>
    <div class="list-box">
      <div class="xq-form-wrapper">
        <div class="xq-form-search">
          <a-input-search allowClear v-model="name" placeholder="搜索员工姓名" style="width: 266px" @search="handleChange" />
          <div style="text-align: right; margin-top: -32px">
            <a-button type="primary" :disabled="shows != 1" @click="onAdd('add')"> 新增权限 </a-button>
          </div>
        </div>
        <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
          <XqTable
            :customize="FormJson['config']['table']['customize']"
            :scroll="{ x: columns.length * 150 }"
            :pagination="false"
            :dataSource="tableData"
            :columns="columns"
            class="xq-form-content-table"
          >
            <!-- 主要内容，表格，自定义 header -->
            <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
              <span :key="index">
                {{ col.customTitle }}
              </span>
            </template>
            <!-- 主要内容，表格，自定义 td -->
            <!-- eslint-disable-next-line prettier/prettier -->
            <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
              <span v-if="col.dataIndex === 'jurisdiction'" :key="index">
                <span v-if="text === 1">客户经理</span>
                <span v-if="text === 2">客户专员</span>
              </span>
              <span v-else-if="col.dataIndex === 'tableAction'" :key="index">
                <a @click="onAdd('edit', record)">配置权限</a>
                <a-divider type="vertical" />
                <a @click="onView(record)">查看客户</a>
              </span>
              <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
            </template>
          </XqTable>
          <div class="xq-form-content-pagination">
            <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
            <a-pagination
              v-model="pageNo"
              :page-size="pageSize"
              :total="total"
              :show-size-changer="true"
              :show-quick-jumper="true"
              :page-size-options="['10', '20', '50', '100']"
              @change="onPageChange"
              @showSizeChange="onPageSizeChange"
            />
          </div>
        </a-spin>
      </div>
    </div>
    <add :visible.sync="addVisible" :type="atype" :info="info" @upDate="upDate" />
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import { getCrmMembers, getMyJurisdiction } from "./api";
import add from "./component/add";
import moment from "moment";

const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

export default {
  mixins: [curdMixin],
  components: {
    add
  },
  data() {
    return {
      name: "",
      addVisible: false,
      atype: "add",
      numArr: [
        { type: "1", name: "推荐总人数", num: 0 },
        { type: "1", name: "成功入职人数", num: 0 },
        { type: "2", name: "经纪人总数", num: 0 },
        { type: "3", name: "分配职位数", num: 0 },
        { type: "4", name: "今日推荐", num: 0 }
      ],
      previewImage: "",
      previewVisible: false,
      logo: [],
      fileList: [],
      id: "",
      form: this.$form.createForm(this, {}),
      value: "",
      socCity: "",
      socCityName: "",
      mType: true,
      visible: false,
      visibleMsg: false,
      spinning: false,
      tableData: [],
      empName: "",
      companyUnitName: undefined,
      settlementStatus: undefined,
      total: 0,
      pageNo: 1,
      pageSize: 10,
      info: {},
      companyIdArr: [],
      shows: 0
    };
  },
  created() {
    this.onGetCrmMembers();
    this.onGetMyJurisdiction();
    // this.onGetCompanyUnits();
  },
  methods: {
    moment,
    async onGetMyJurisdiction() {
      try {
        const { data } = await getMyJurisdiction();
        this.shows = data;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onGetCrmMembers() {
      try {
        this.spinning = true;
        const { data } = await getCrmMembers({
          name: this.name,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        });
        this.tableData = data?.entities || [];
        this.total = data?.entityCount || 0;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetCrmMembers();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetCrmMembers();
    },
    onShowModal() {
      this.mType = true;
      this.visible = true;
      this.form.resetFields();
    },
    handleCity(e) {
      if (e.value.length > 0) {
        const value = e.value;
        const label = e.label;
        this.socCity = value[value.length - 1].toString();
        if (label.length && label.length === 3) {
          this.socCityName = label[0] + "/" + label[1] + "/" + label[2];
        } else if (label.length && label.length === 2) {
          this.socCityName = label[0] + "/" + label[1];
        }
      } else {
        this.socCity = "";
        this.socCityName = "";
      }
    },
    handleChange() {
      this.pageNo = 1;
      this.onGetCrmMembers();
    },
    upDate() {
      this.onGetCrmMembers();
      this.onGetMyJurisdiction();
      this.visible = false;
    },
    onAdd(t, e) {
      this.atype = t;
      this.info = e;
      this.addVisible = true;
    },
    onView(e) {
      this.$router.push({ name: "memberMsg", query: { userId: e.id, name: e.name, jurisdiction: e.jurisdiction } });
    }
  }
};
</script>

<style lang="scss" scoped>
.list-box {
  padding: 24px;
}
</style>
